<template>
    <div>
        <!--    导航    -->
        <div>
            <div class="navbar inline-block">
                <img class="navbar-img" src="/logo.png" />
                <a class="navbar-title" href="/">湖南科技大学-党校</a>
            </div>
            <div class="logout float-right inline-block">
                <a-popconfirm title="确认退出么" placement="leftTop" ok-text="是" cancel-text="否" @confirm="logout()">
                    退出
                </a-popconfirm>
            </div>
        </div>
        <div>
            <!--    个人信息    -->
            <a-row class="user-inf-card" style="text-align: center;background-color: white;padding-bottom: 15px;padding-top: 15px">
                <a-avatar :size="80" icon="user" :src="$store.getters.avatar"/>
                <div style="display: inline-block; vertical-align: middle; margin-left: 15px">
                    <p style="margin-bottom: 0;"><span  style="font-size: 24px;">{{$store.getters.nickName}}</span> <span style="color: #777">{{$store.getters.userName}}</span></p>
                    <p style="margin-bottom: 0">
                        {{$store.getters.deptName}}
                        <a-button type="primary" size="small" style="font-size: 10px" @click="$router.push('userInfo')">
                            个人设置
                        </a-button>
                    </p>
                </div>
            </a-row>
            <a-row>
                <a-col :xs="{span: 24}" :md="{span:22, offset: 1}" :lg="{span:20, offset: 2}">
                    <a-button
                            @click="$router.push('/exam')"
                            type="primary"
                            style="margin-top:10px">
                        考试系统
                    </a-button>
                </a-col>
            </a-row>
            <!--    可报名    -->
            <a-row>
                <a-col :xs="{span: 24}" :md="{span:22, offset: 1}" :lg="{span:20, offset: 2}" class="card">
                    <div class="h4 list-title">可报名学期</div>
                    <a-spin :spinning="loadingCanSignSemesterList">
                        <div class="lists">
                            <div class="list-item" v-for="item in canSignSemesterList">
                                <div class="h4"><span>{{ item.semeName }}</span></div>
                                <div class="h5">培训时间 {{ item.startTime != null ? item.startTime : '待定' }} — {{ item.endTime != null ? item.endTime : "待定"}}</div>
                                <div><span class="click-a" @click="applyAddOrUpdateHandler( item.semeId )">申请/报名</span></div>
                            </div>
                        </div>
                    </a-spin>
                </a-col>
            </a-row>
            <!--    已经报名    -->
            <a-row>
                <a-col :xs="{span: 24}" :md="{span:22, offset: 1}" :lg="{span:20, offset: 2}">
                    <div class="h4 list-title">已报名记录</div>
                    <a-spin :spinning="loadingUserApplyList">
                        <div class="lists">
                            <div class="list-item" v-for="item in userApplyList">
                                <div>
                                    <div class="h4" style="display: inline-block">{{ item.semeName }}</div>
                                    <a-tag class="user-apply-status-tag" :color="applyTagColor[item.checked]">{{applyTagName[item.checked]}}</a-tag>
                                </div>
                                <div class="h5">报名时间 {{ item.createTime }}</div>
                                <div>
                                    <span class="click-a" @click="applyAddOrUpdateHandler(item.semeId, item.applyId)">查看/修改资料</span>
                                    <span class="click-a" @click="courseHandler(item.semeId)">查看课程</span>
                                    <span class="click-a" @click="trainDataHandler(item.applyId)">查看信息</span>
                                    <span class="click-a"  @click="showSummaryModal(item.applyId)">个人小结</span>

                                </div>
                            </div>
                        </div>
                    </a-spin>
                </a-col>
            </a-row>
        </div>
        <a-modal v-model="summaryModalVisible" title="个人小结" :maskClosable="false" okText="提交" cancelText="关闭">
            <a-input
                    v-model="summaryForm.summary"
                    type="textarea"
                    :auto-size="{ minRows: 4}"
                    placeholder="请输入个人小结，不低于200字"
                    :destroyOnClose="true"
            />
        </a-modal>
        <a-modal v-model="trainModalVisible" title="培训信息" :maskClosable="false">
            <a-spin :spinning="loadingStudentTrainData">
                <a-descriptions bordered size="small" :column="{sm: 2, xs: 1}">
                    <a-descriptions-item label="小组">
                        {{studentTrainData.groupName}}
                    </a-descriptions-item>
                    <a-descriptions-item label="座位安排">
                        {{studentTrainData.seatNum}}
                    </a-descriptions-item>
                    <a-descriptions-item label="考勤情况">

                    </a-descriptions-item>
                    <a-descriptions-item label="平时考核">

                    </a-descriptions-item>
                    <a-descriptions-item label="结业考试得分">
                        {{studentTrainData.scores}}
                    </a-descriptions-item>
                    <a-descriptions-item label="分班" v-if="studentTrainData.seatNum">
                        {{studentTrainData.seatNum.substring(0, 1)}}合班
                    </a-descriptions-item>
                </a-descriptions>
            </a-spin>
        </a-modal>
        <a-modal v-model="courseModalVisible" title="培训课程" :maskClosable="false">
            <a-spin :spinning="loadingStudentCourse">
                <a-table :columns="columns"
                         class="table"
                         :scroll="{x: true}"
                         :data-source="courseList"
                         rowKey="courseId"
                         :defaultExpandAllRows="true">
                    <span slot="action" slot-scope="text, record">
                      <a-button @click="$router.push('/live?liveUrl=' +record.liveUrl)" v-if="record.liveUrl">进入直播</a-button>
                      <span v-if="record.videoUrl">
                          <a-button v-for="(videoUrl, index) in urlsToUrlArr(record.videoUrl)" @click="toVideo(videoUrl)" v-if="">视频1</a-button>
                      </span>
                      <span v-if="record.signStartTime">
                       <a-button @click="studentSignHandler(record.signLaunchId)" :loading="loadingSign">签到</a-button>
                      </span>
                    </span>
                </a-table>
            </a-spin>
        </a-modal>
        <apply-add-or-update ref="applyAddOrUpdate" v-on:reLoadApplyList="getUserApplyList()"/>
    </div>
</template>

<script>
import { getCanSignSemester } from '@/api/semester';
import { getUserApply, getApplySummary } from '@/api/apply'
import ApplyAddOrUpdate from './apply/ApplyAddOrUpdate'
import { getStudentTrainData } from '@/api/student'
import { getSemesterCourse } from "../../api/course";
import { studentSign } from "../../api/sign";

export default {
name: "UserIndex",
data() {
  const columns = [
    {
      title: '编号',
      dataIndex: 'courseId',
      key: 'courseId',
      width: 60
    },
    {
      title: '名称',
      dataIndex: 'courseTitle',
      key: 'courseTitle',
      width: 100
    },
    {
      title: '教师',
      dataIndex: 'teacher',
      key: 'teacher',
      width: 100
    },
    {
      title: '内容',
      dataIndex: 'content',
      key: 'content',
      width: 100
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      key: 'startTime',
      width: 100
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      key: 'endTime',
      width: 100
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: {customRender: 'action'},
      width: 200
    }
  ];
  return {
    canSignSemesterList: [],
    userApplyList: [],
    applyTagColor: ["orange", "green", "red"],
    applyTagName: ["审核中", "审核通过", "审核未通过"],
    summaryModalVisible: false,
    summaryForm: {},
    loadingCanSignSemesterList: false,
    loadingUserApplyList: false,
    loadingStudentCourse: false,
    trainModalVisible: false,
    courseModalVisible: false,
    studentTrainData: {},
    loadingStudentTrainData: false,
    columns,
    courseList: [],
    loadingSign: false
  }
},
components: {ApplyAddOrUpdate},
methods: {
  logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.href = "/index";
      })
  },
  getCanSignSemesterList() {
    this.loadingCanSignSemesterList = true;
    getCanSignSemester().then(res => {
      this.canSignSemesterList = res.data;
      this.loadingCanSignSemesterList = false;
    })
  },
  getUserApplyList() {
    this.loadingUserApplyList = true;
    getUserApply().then(res => {
      this.userApplyList = res.data;
      this.loadingUserApplyList = false;
    })
  },
  showSummaryModal(applyId) {
    this.summaryForm.applyId = applyId;
    this.getApplySummaryById(applyId);
    this.summaryModalVisible = true;
  },
  getApplySummaryById(applyId) {
    getApplySummary(applyId).then(res => {
      this.summaryForm.summary = res.data
    })
  },
  applyAddOrUpdateHandler(semeId, applyId) {
    this.$nextTick(() => {
      this.$refs['applyAddOrUpdate'].init(semeId, applyId)
    })
  },
  courseHandler(semeId) {
    this.loadingStudentCourse = true;
    this.courseModalVisible = true;
    getSemesterCourse(semeId).then(res => {
      this.courseList = res.data.courseSimpleVoList;
      this.loadingStudentCourse = false;
    })
  },
  trainDataHandler(applyId) {
    this.trainModalVisible = true;
    this.loadingStudentTrainData = true;
    getStudentTrainData(applyId).then(res => {
      this.studentTrainData = res.data;
      this.loadingStudentTrainData = false;
    })
  },
  toVideo(videoUrl) {
    window.open(videoUrl, "_blank");
  },
  studentSignHandler(signLaunchId) {
    this.loadingSign = true;
    var geolocation = new BMapGL.Geolocation();
    var that = this;
    geolocation.getCurrentPosition(function(r) {
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
        studentSign(signLaunchId, {lng: r.point.lng, lat: r.point.lat}).then(res => {
          that.loadingSign = false;
          that.$message.success("签到成功");
          console.log(res);
        }).catch(err => {
          that.loadingSign = false;
          console.log(err)
        })
      }
      else {
        that.loadingSign = false;
      }
    });

  },
  urlsToUrlArr(urls) {
    if(!urls) {
      return [];
    }
    return urls.split(',');
  }

},
created() {
  this.getCanSignSemesterList();
  this.getUserApplyList();
}
}
</script>

<style scoped>
.contain {
    width: 1400px;
    margin: 0 auto;
}
.h4 {
    font-size: 18px;
    margin-bottom: 5px;
    margin-top: 5px;
}
.h5 {
    font-size: 14px;
    color: #777;
    margin-bottom: 5px;
    margin-top: 5px;
}
.click-a {
    color: #369;
    cursor: pointer;
    font-size: 16px;
    margin-right: 14px;
}

.float-right {
    float: right;
}
.inline-block {
    display: inline-block;
}
.navbar {
    height: 50px;
    font-size: 18px;
    color: black;
}
.navbar .navbar-img {
    width: 50px;
    padding: 15px 15px;
}
.logout {
    line-height: 50px;
    margin-right: 15px;
}
.list-title {
    /*padding: 10px 0 10px 0;*/

}
.lists {
    background-color: white;
}
.list-item {
    padding: 5px 20px;
    border: #ccc solid 1px
}
.user-apply-status-tag {
    margin-left: 10px;
    display: inline-block;
    /*vertical-align: center;*/
    /*padding-bottom: 4px;*/
    verticle-align:middle

}

/* 表格 */
/*.table 为全局表格自定义样式*/
.table .ant-table-body,.table .ant-table-header {
    overflow-x: auto !important;
}
/deep/ .ant-table td {
    white-space: nowrap;
}
/deep/ .ant-modal-body {
    padding: 0;
}
</style>
